<!-- vue-zhu/src/login/login.vue -->
<template>
  <div class="login-container">
    <div class="welcome-section">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button class="sign-in-button button_sign" @click="showSignIn">登录</button>
      <button class="sign-up-button button_sign" @click="showSignUp">注册</button>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import SignIn from './components/sign_in.vue';
import SignUp from './components/sign_up.vue';

export default {
  name: 'Login',
  components: {
    SignIn,
    SignUp
  },
  data() {
    return {
      currentComponent: 'SignIn',
      title: '欢迎回来',
      description: '为了保持联系，请使用您的个人信息登录'
    }
  },
  methods: {
    showSignIn() {
      this.currentComponent = 'SignIn';
      this.title = '欢迎回来';
      this.description = '为了保持联系，请使用您的个人信息登录';
    },
    showSignUp() {
      this.currentComponent = 'SignUp';
      this.title = '朋友你好';
      this.description = '输入您的个人信息，与我们一起开始旅程';
    }
  }
}
</script>

<style scoped>
@import '../assets/css/login.css';
</style>